<script setup>
import { ref } from "vue"
import { onMounted, onUnmounted } from 'vue';
import data from '@/data/movie_data.json'
import { useRouter } from 'vue-router';
import { getmoviedtail } from '@/api/movie'
import myBack from '@/components/back.vue'
import vimg from '@/components/photoviews.vue'


const router = useRouter();

let filmId = router.currentRoute.value.query.filmId

function timestampToDateFormat(timestamp) {
  const dateObj = new Date(timestamp); // 创建Date对象
  const year = String(dateObj.getFullYear()); // 获取年份
  const month = String(dateObj.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
  const day = String(dateObj.getDate()).padStart(2, "0"); // 获取日期，并补零

  return year + "-" + month + "-" + day; // 返回转换后的日期格式
}

let isphotos = ref(false)
let isback = ref(true)



function upphotostatus() {
  isphotos.value = !isphotos.value
  isback.value = !isback.value
  isbottombtn.value = !isbottombtn.value
}

const params = {
  'filmId': filmId,
  'k': 7636500,
}
let moviedtaildata = ref({})

function sumlength(objlist) {
  return objlist.length
}
let photolength = ref(0)

async function get_moviedtail() {
  // 1、请求数据
  let res = await getmoviedtail(params)
  moviedtaildata.value = res.data.data.film



}

get_moviedtail()
const props = defineProps(['movie_list_data'])


let actors_img = "https://pic.maizuo.com/usr/movie/a7b242f9b8167e42c460d3b96d28a721.jpg?x-oss-process=image/quality,Q_70"
let movie_data = data.data.films
// console.log(movie_data)
// console.log(movie_data[0].poster)

let photos = "https://pic.maizuo.com/usr/2024/051a26ee788620caf60d11a45ebdbf53.jpg"

let img_url = "https://pic.maizuo.com/usr/movie/57116f984c95f7e0abe768550bd78ef9.jpg"
// let msg = $props

onMounted(() => {


});

</script>

<template>


  <div class="film">
    <van-sticky>
      <myBack v-show="isback" class="my-back" />
    </van-sticky>
    <div class="lazy-img film-poster">
      <div class="lazy-img-wrap">
        <img class="target-img" :src="moviedtaildata.poster" alt="">
      </div>

    </div>

    <div class="movie_info_list">


      <div class="movie_info_card">


        <div class="movie_info_box">
          <div class="movie_title_box">
            <div >
              <span class="movie_title">{{ moviedtaildata.name }}</span>
              <span class="movie_fileType"> {{ moviedtaildata.item.name }}</span>
            </div>
            <span class="grade_text">{{ moviedtaildata.grade ? moviedtaildata.grade+'分':'暂无评分' }}</span>
          </div>
          <div class="movie_dtail_text">
            <span>{{ moviedtaildata.category }}</span>
            <span>{{ timestampToDateFormat(moviedtaildata.premiereAt * 1000) }}上映</span>
            <span>{{ moviedtaildata.nation }}|{{ moviedtaildata.runtime }}分钟</span>
          </div>
          <div class="grey-wrapper">
            <input id="exp1" class="exp" type="checkbox">
            <div class="grey-text" id="grey-text">
              <label for="exp1" class="text-btn"></label>
              {{ moviedtaildata.synopsis }}

            </div>
          </div>

        </div>
      </div>

      <div class="actors">
        <div class="actors-title-bar">
          演职人员
        </div>
        <div class="actors-list">
          <span style="padding-top: 20px;color: #797d82; font-size: 12px" v-if="moviedtaildata.actors===undefined">无演职人员</span>
          <div v-for="(actors, index) in moviedtaildata.actors">

            <li>
              <div class="actors_img_box">
                <!-- <vimg :src="actors.avatarAddress"/> -->

                <img :src="actors.avatarAddress" v-viewer alt="">

              </div>
              <p>{{ actors.name }}</p>
              <span class="role_text">{{ actors.role }}</span>
            </li>

          </div>

        </div>
      </div>
      <div class="photos">

        <div class="photos-title-bar">
          <span class="photos-title-text">
            剧照
          </span>
          <div>
            <span class="photos-to-all" style="color: #797d82;" @click="moviedtaildata.photos?upphotostatus():''">
              {{moviedtaildata.photos?'全部('+sumlength(moviedtaildata.photos)+')':'暂无图片' }}
            </span>
            <van-icon v-if="moviedtaildata.photos" name="arrow" color="#797d82" />
          </div>

        </div>
        <div class="photos-list">
          <span style="padding-top: 40px; padding-left:15px;color: #797d82; font-size: 12px" v-if="moviedtaildata.photos===undefined">暂无图片</span>
          <ul v-for="(photo, index) in moviedtaildata.photos" :key="index">
            <div class="photos_img_box">
              <el-image
                  class="box-img"
                  :src="photo"
                  :preview-src-list="moviedtaildata.photos"
              />
            </div>

<!--            <div class="photos_img_box">-->
<!--              <img :src="photo" v-viewer alt="">-->
<!--            </div>-->

          </ul>
        </div>

      </div>
      <div v-show="isphotos" class="photo_album">
        <div class="close_btn" @click="upphotostatus()">
          关闭
        </div>
        <div class="oop" v-for="(photo, index) in moviedtaildata.photos" :key="index">
          <img :src="photo" v-viewer alt="">
        </div>

      </div>
<!--      <van-sticky position="bottom" offset-bottom="0">-->
        <van-button  class="bottom_btn" color="#ff5f16" square>
          选座购票
        </van-button>
<!--      </van-sticky>-->

    </div>
  </div>
</template>

<style scoped src="../css/moviedtailstyle.css"></style>